<template>
  <div class="page-item" :id="pageIndex" ref="pageItem">
    <!-- 页眉 -->
    <div v-html="pageTopList"></div>
    <div class="w-content-wrap w-content page-box">
      <template v-if="htmlList">
        <div v-html="htmlList"></div>
      </template>
      <div v-if="list">
        <div v-for="(item, index) in list" :key="index">
          <!-- type为1的时候title -->
          <w-title
            class="jump-index"
            v-if="
              item.detailType == 1 ||
                item.detailType == 2 ||
                item.detailType == 3 ||
                item.detailType == 4 ||
                item.detailType == 0
            "
            :title="JSON.parse(item.data).data"
            :level="item.detailType"
            :id="item.htmlId"
          ></w-title>
          <!-- type为2的时候table -->
          <w-table
            class="test-table"
            v-if="item.detailType == 11"
            :id="item.htmlId"
            :tableData="JSON.parse(item.data).data"
            :config="JSON.parse(item.data).config"
            :tableName="JSON.parse(item.data).name"
            :useType="1"
          ></w-table>
          <!-- type为3的时候echarts -->
          <w-charts
            v-if="item.detailType == 10"
            :id="item.htmlId"
            :itemData="JSON.parse(item.data)"
            :width="JSON.parse(item.data).width"
            :height="JSON.parse(item.data).height"
          ></w-charts>
          <!-- type为4的时候text -->
          <wText
            v-if="item.detailType == 5"
            :message="JSON.parse(item.data).data"
            :className="JSON.parse(item.data).cssName"
            :id="item.htmlId"
          ></wText>
          <!-- type为6的时候img -->
          <div
            v-if="item.detailType == 12 || item.detailType == 13"
            v-html="JSON.parse(item.data).data"
            :id="item.htmlId"
            :class="[
              JSON.parse(item.data).cssName != ''
                ? JSON.parse(item.data).cssName + ' m-bottom'
                : 'm-bottom'
            ]"
          ></div>
        </div>
      </div>
    </div>
    <!-- 页脚 -->
    <div v-html="pageBottomList"></div>
  </div>
</template>

<script>
import wTitle from '../components/title'
import wText from '../components/text'
import wTable from '../components/table'
import wCharts from '../components/echarts'
import chartMixins from '../components/mixins/chartMixins'
import { mapState } from 'vuex'
export default {
  name: 'pageItem',
  props: {
    list: {
      type: Array
    },
    pageLen: {
      type: Number
    },
    currentPage: {
      type: Number
    },
    htmlList: {
      type: String
    },
    pageTopList: {
      type: String,
      default: ''
    },
    pageBottomList: {
      type: String,
      default: ''
    },
    pageIndex: {
      type: String,
      default: '0'
    }
  },
  mixins: [chartMixins],
  components: {
    wTitle,
    wText,
    wTable,
    wCharts
  },
  computed: {
    ...mapState(['home'])
  },
  mounted() {},
  watch: {},
  data() {
    return {
      page: 1,
      chartData: {}
    }
  },
  methods: {}
}
</script>
